<template>
	<view class="msg_txt" >
		<block v-for="(item,index) in contentList">
			<text class="text" :key="index" v-if="item.name === 'text'" :style="{fontSize: fontValue + 'px'}">{{ item.text }}</text>
			<image class="emoji" v-else-if="item.name === 'img'" :src="item.src" mode="aspectFit" :key="index"></image>
		</block>
	</view>
</template>

<script>
	import {copy} from "@/utils/util.js"
	import {decodeText} from '@/utils/emojiMap.js'
	export default{
		props:{
			content:{
				type:String,
				required:true
			}
		},
		data(){
					return {
						fontValue:'14',
					}
		},
		computed:{
			contentList() {
			  return decodeText(this.content)
			}
		},
		   created() {
		 this.fontValue=  uni.getStorageSync('fontSize')
		 console.log( this.fontValue)
		   
		    },
		methods:{
			copyTxt(){
				copy(this.content)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.msg_txt{
		position: relative;
		padding: 14rpx;
		background-color: #FFFFFF;
		font-size: 32rpx;
		max-width: 460rpx;
		border-radius: 0 10rpx 10rpx 10rpx;
		word-wrap: break-word;
		.text{
			word-wrap: break-word;
		}
		.emoji{
			width: 1.3em;
			height: 1.3em;
			display: inline-block;
			vertical-align: text-bottom;
		}
		&::before{
			position: absolute;
			content: '';
			border-width: 10rpx;
			border-style: solid;
			border-color: #FFFFFF #FFFFFF transparent transparent;
			top: 0;
			left: -8rpx;
		}
	}
	.self{
		.msg_txt{
			background-color: #cfe7ff;
			border-radius: 10rpx 0 10rpx 10rpx;
			&::before{
				content: none;
			}
			&::after{
				position: absolute;
				content: '';
				border-width: 10rpx;
				border-style: solid;
				border-color: #cfe7ff transparent transparent  #cfe7ff;
				top: 0;
				right: -8rpx;
			}
		}
	}
</style>
